<template>
  <div class="item-con">
    <div class="question">
      <!--img class="titleBg" src="../assets/question/bg_12 2.png"-->
      <p class="questionTitle">{{ problems[itemNum].content }}</p>
    </div>
    <div class="answer-lists">
      <div class="answerItem" v-for='(item,index) in ansList' :key="index" v-if="problems[itemNum]['option'+item]" :class="{show:chooseId === item,right:isRight,error:!isRight}" @click="answerEvent(item)" >
        <div style="width:90%;">
          <p>{{ ansPrefix[index] }} {{ problems[itemNum]['option'+item].substring(1) }} </p>
        </div>
        <div v-if="chooseId === item" style="margin-right:0.5rem;display:flex;flex-direction:column;justify-content: center;">
          <img v-if="isRight" class="icon rightIcon" src="../assets/question/right.png">
          <img v-else class="icon errorIcon" src="../assets/question/error.png">
        </div>
      </div>
    </div>
    <transition name="explain">
      <div v-if="ansState" class="explain">
        <div v-if="isRight">
          <p>射门成功</p>
        </div>
        <div class="explain" v-else>
          <p>正确答案是 {{ rightPrefix }}</p>
        </div>
        <div class="btns" v-if="gameType === 1">
          <div class="ballon" id="btn_pre" @click="preItem"></div>
          <div>
            <div id="ball" class="Rotation"></div>
          </div>
          <div class="ballon" id="btn_next" @click="nextItem"></div>
        </div>
        <div class="btns" v-else>
          <div @click="nextItem">
            <div id="ball" class="Rotation"></div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isClose: false,
      isDone: false,
      allScore: null,
      ansState: null,
      isRight: null,
      itemNum: 0,
      chooseId: null,
      problems: [],
      misCount: 0,
      ansList: [1, 2, 3, 4],
      prefixs: ['A', 'B', 'C', 'D'],
      ansPrefix: ['A', 'B', 'C', 'D'],
      rightPrefix: ''
    }
  },
  props: {
    gameType: { // 问答类型：1为友谊赛，2为对抗赛
      type: Number,
      required: true
    },
    problemList: {
      type: Array,
      required: true
    }
  },
  created () {
    this.problems = this.problemList
    this.random()
  },
  methods: {
    // 友谊赛存在上一题
    preItem () {
      if (this.itemNum > 0) {
        this.itemNum -= 1
        this.ansState = null
        this.isRight = null
        this.chooseId = null
        this.random()
      } else {
        this.$router.push({path: '/mode'})
      }
    },
    // 下一步
    nextItem () {
      if (this.misCount > 0) {
        // 存在错题记录，则提交
        this.GLOBAL.player.missCount = this.misCount
        this.commit()
        return
      }
      if (this.itemNum < this.problems.length) {
        if (this.ansState) {
          this.itemNum += 1
          this.ansState = null
          this.isRight = null
          this.chooseId = null
          if (this.itemNum >= this.problems.length) {
            // 完成题目
            this.commit()
          }
        } else {
          alert('请选择')
        }
      } else {
        // 突发故障时启用
        this.commit()
      }
      this.random()
    },
    answerEvent (item) {
      if (!this.$data.ansState) {
        this.chooseId = item
        this.$data.ansState = true
        if (Number(this.problems[this.itemNum].correct) === item) {
          this.isRight = true
        } else if (this.gameType === 2) {
          // 竞赛模式，答错需记录
          this.misCount += 1
        }
      }
    },
    commit () {
      this.$emit('commitQuestion')
      // this.$router.push({path: '/lottery'})
    },
    random () {
      this.ansList.sort(this.randomsort)
      this.getPrefix()
    },
    randomsort (a, b) {
      return Math.random() > 0.5 ? -1 : 1
    },
    getPrefix () {
      let i = 0
      for (var j = 0, len = this.ansList.length; j < len; j++) {
        if (this.problems[this.itemNum]['option' + this.ansList[j]]) {
          this.ansPrefix[j] = this.prefixs[i]
          if (Number(this.problems[this.itemNum].correct) === this.ansList[j]) {
            this.rightPrefix = this.prefixs[i]
          }
          i++
        }
      }
    }
  },
  computed: {
    showPre () {
      if (this.gameType === 1 && this.itemNum > 0) {
        return true
      }
      return false
    }
  }
}
</script>

<style scoped>
.question{
  text-align: center;
  margin-bottom: 1rem;
  width: 100%;
  height: 6rem;
  border-radius: 0.3rem;
  background-color:#000000;
  opacity: 0.7;
}
.titleBg {
  width: 100%;
}
.questionTitle {
  color:white;
  text-align:left;
  width:90%;
  margin:0.1rem 0.5rem;
  float: left;
  left: 0;
  top: 0;
  font-size: 0.9rem;
}
.answer-lists {
  margin-top: 1.6rem;
  min-height: 12.3rem;
}
.answerItem {
  width: 92%;
  margin-left: 4%;
  background-color: white;
  margin-bottom: 1.5rem;
  border-radius: 0.3rem;
  color: rgb(57, 121, 229);
  display: flex;
}
.answerItem p {
  margin: 0 0 0 3%;
  padding:0.5rem 0;
  font-size: 0.7rem;
}
.show {
  color: white;
}
.show.right {
  background-color: rgb(59, 165, 92);
}
.show.error {
  background-color: rgb(193, 39, 45);
}
.icon {
  width:1.5rem;
  height:1.5rem;
  background-size:cover;
  list-style-type: none;
}
.explain {
  margin-top: -0.5rem;
  text-align: center;
}
.explain p {
  font-size: 0.5rem;
  color: white;
  margin: 0 auto;
  height: 1.5rem;
}
.btns {
  display: flex;
  flex-flow: row;
  justify-content: space-around;
  align-items: center;
}
.btns p {
  font-size: 0.8rem;
  margin-top: 0.5rem;
}
.showBtn {
  visibility:hidden;
}
@keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
    0%{
        transform: scale(1);  /*开始为原始大小*/
    }
    25%{
        transform: scale(1.1); /*放大1.1倍*/
    }
    50%{
        transform: scale(1);
    }
    75%{
        transform: scale(1.1);
    }
}
.ballon{
    width: 2rem;
    height: 1.2rem;
    opacity: 0.5;
    animation-name: scaleDraw; /*关键帧名称*/
    animation-timing-function: ease-in-out; /*动画的速度曲线*/
    animation-iteration-count: infinite;  /*动画播放的次数*/
    animation-duration: 4s; /*动画所花费的时间*/
}
#btn_pre {
  background:url('../assets/question/pre.png') no-repeat;
  background-size: 2rem 1.2rem;
}
#btn_next {
  background:url('../assets/question/next.png') no-repeat;
  background-size: 2rem 1.2rem;
}
#ball {
  background:url('../assets/question/ball.png') no-repeat;
  background-size: 3.2rem 3.2rem;
  width: 3.2rem;
  height: 3.2rem;
}
@keyframes rotation{
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}

.Rotation{
transform: rotate(360deg);
animation: rotation 1s linear infinite;
-moz-animation: rotation 1s linear infinite;
-webkit-animation: rotation 1s linear infinite;
-o-animation: rotation 1s linear infinite;
}
</style>
